<template>
  <u-popup
    safe-area-inset-bottom
    mode="bottom"
    v-model="showPopup"
    :z-index="124"
    :mask-close-able="false"
    border-radius="24"
  >
    <view :class="['pop', className]">
      <view class="title">{{ title }}</view>
      <view class="des">{{ desc1 }}</view>
      <view class="link" @click="openPrivacyContract">{{ urlTitle }}</view>
      <view class="des">{{ desc2 }}</view>

      <view class="btn">
        <button id="disagree-btn" type="default" @click="handleDisagree">
          拒绝
        </button>
        <button
          id="agree-btn"
          type="default"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="agreeprivacyauthorization"
        >
          同意
        </button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    className: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      title: "用户隐私保护提示",
      desc1: "感谢您使用本小程序，您使用本程序前应当阅读同意",
      urlTitle: "《用户隐私保护指引》",
      desc2:
        "当您点击同意并开始使用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用部分功能。",
      showPopup: false,
    };
  },

  methods: {
    hasShowPrivacySetting() {
      if (wx.getPrivacySetting) {
        wx.getPrivacySetting({
          success: (res) => {
            if (res.needAuthorization) {
              this.showPopup = true;
            }
          },
          fail: () => {},
          complete: () => {},
        });
      } else {
      }
    },

    openPrivacyContract() {
      wx.openPrivacyContract({
        success: () => {},
        fail: (res) => {
          this.$utils.toast(res);
        },
      });
    },

    handleDisagree() {
      this.$utils.toast(
        '"用户拒绝隐私授权, 未同意过的隐私协议中的接口将不能调用")'
      );
      this.showPopup = false;
    },

    agreeprivacyauthorization() {
      this.$utils.toast("用户同意隐私授权");
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.pop {
  padding: 30rpx;

  &.tabbar {
    padding-bottom: 140rpx;
  }
}

.title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
}

.des {
  padding-top: 32rpx;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.3);
}

.link {
  padding-top: 32rpx;
  font-size: 28rpx;
  color: blue;
}

.btn {
  display: flex;
  justify-content: space-between;
  padding-top: 40rpx;

  button {
    width: 300rpx;
  }
}
</style>
